import React, { useState, useRef,useEffect } from 'react'
import { Toast, NavBar } from 'react-vant';
import { useLocation, useNavigate, useParams } from 'react-router-dom'
import { SendOutline } from 'antd-mobile-icons'
import { GoodJobO, StarO, ChatO } from '@react-vant/icons';
import { Search } from 'react-vant';
import axios from '../../utils/index'
import './index.css'
const Index: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [obj, setObj] = useState(location.state)
  const [num, setNum] = useState(10); // 点赞数量
  const [isLiked, setIsLiked] = useState(false); // 是否被点赞

  const [shou, setShou] = useState(false); // 是否被点赞
  const zan = () => {
    if (isLiked) {
      setNum(num - 1);
      setIsLiked(false);
    } else {
      setNum(num + 1);
      setIsLiked(true);
    }
  }

  const cang = () => {
    if (shou) {
      setShou(false);
    } else {
      setShou(true);
    }
  }

  const shareContent = async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title: '分享标题',
          text: '分享的文本内容',
          url: window.location.href
        });
      } catch (error) {
        console.error('分享失败:', error);
      }
    } else {
      console.log('浏览器不支持Web Share API');
    }
  };
  const [isSecondInputVisible, setIsSecondInputVisible] = useState(false);
  const toggleSecondInputVisibility = () => {
    setIsSecondInputVisible(!isSecondInputVisible);
    
  };

  const qu = (e) => {
    setIsSecondInputVisible(false);
    e.value=''
  }
  // 存储单个评论的状态
  const [comment, setComment] = useState('');
  // 存储所有评论的状态
  const [comments, setComments] = useState([]);
  const [data, setData] = useState(['王*欢', '李*辉', '陈*宇'])
  const [randomData, setRandomData] = useState(data[Math.floor(Math.random() * data.length)]);
  // 重新随机选择数据
  useEffect(() => {
    setRandomData(data[Math.floor(Math.random() * data.length)]);
  }, [data]);


  const handleCommentChange = (e) => {
    setComment(e.target.value);
  };
  const handleSubmit = () => {
    if (comment.trim()) {
      setComments([...comments, comment]);
      setComment(''); // 清空输入框‘
    }
    setIsSecondInputVisible(false);
  };

  return (
    <div>
      <p className='p1' onClick={shareContent}><SendOutline /></p>
      <NavBar
        title='健康头条'
        leftText="返回"
        onClickLeft={() => navigate(-1)}
      />
      <h1>{obj.item.title} </h1>
      <div className='div1'>
        <img src={obj.item.img2} alt="" style={{ width: '50px', height: '50px' }} />
        <p>{obj.item.wei}</p>
        <p>{obj.item.count}阅读</p>
      </div>
      <img src={obj.item.img1} alt="" style={{ width: '100%', height: '200px', marginTop: '20px' }} />

      <div className='tu'>
        <div className='tu1'>
          <GoodJobO className='biao' onClick={zan} style={isLiked ? { color: 'red' } : {}} />
          <p className='ppp' style={{ color: isLiked ? 'red' : '' }} >{num}</p>
        </div>
        <div className='tu1'>
          <StarO className='biao' onClick={cang} style={shou ? { color: 'yellow' } : {}} />
          <p className='ppp1'>{shou ? '已收藏' : '收藏'}</p>
        </div>
        <div className='tu1'>
          <img src="../src/assets/00_03.jpg" alt="" style={{ width: '40px', height: '40px' }} />
          <p className='ppp2'>朋友圈</p>
        </div>
        <div className='tu1'>
          <img src="../src/assets/00_05.jpg" alt="" style={{ width: '40px', height: '40px' }} />
          <p className='ppp'>微信</p>
        </div>
      </div>

         <div className='ppppppp1'>
            评论区
        </div>


      <div>
        {comments.map((comment, index) => (
          <div key={index}>
            <div className='zx' >
              <img src="../src/assets/50_03.jpg" alt="" style={{ width: '50px', height: '50px' }} />
              <div>
                  <h4 className='mz'>{randomData}</h4>
                  <p className='nr'>{comment}</p>
                  <p>2024-12-14 10:20:00</p>
              </div>
            </div>
            <hr />
          </div>
        ))}

      </div>
      <div className='pl3'>
        <div className='inp'>
          <input placeholder="输入想说的话" className='inpu' onClick={toggleSecondInputVisibility} />
          {isSecondInputVisible && (
            <div className='input22'>
              <div className='fa'>
                <button className='qu' onClick={qu}>取消</button>
                <button className='que' onClick={handleSubmit}>发送</button>
              </div>
              <hr />
              <textarea
                value={comment}
                onChange={handleCommentChange}
                placeholder="写下你的评论..."
                style={{ width: "100%", height: '100%', border: 'none' }}
              />
            </div>
          )}
        </div>
        <div className='pl1'>
          <div className='pl2'>
            <ChatO className='tu1' />
            <p className='qq1'>评论</p>
          </div>
          <div className='pl2'>
            <GoodJobO className='tu1' onClick={zan} style={isLiked ? { color: 'red' } : {}} />
            <p className='qq1'>{isLiked ? '已点赞' : '点赞'}</p>
            <p className='qqqq'>{num}</p>
          </div>
          <div className='pl2'>
            <StarO className='tu1' onClick={cang} style={shou ? { color: 'yellow' } : {}} />
            <p className='qq1'>{shou ? '已收藏' : '收藏'}</p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index
